第 1 步 - 准备内容

在教程的这一步，您首先创建可视化用户拖动项的预设件，然后设置各项的纹理。

教程资产

本教程的起点资料存储在 <KanziWorkspace>/Tutorials/Drag and drop/Start 目录中。

<KanziWorkspace>/Tutorials/Drag and drop/Completed 目录包含本教程已完成的工程。

起点工程包含完成本教程所需的内容：

• 导航栏 (Navigation Bar) 预设件。
  该预设件为2D 切换按钮组 (Toggle Button Group 2D) 节点，其中有包含2D 切换按钮 (Toggle button 2D) 节点的 2D 网格布局 (Grid layout 2D) 节点。按钮使用 Navigation Item 预设件。
  
• Navigation Item 预设件。
  在 Navigation Item > 图像 (Image) 节点中，图像 (Image) 属性绑定到您在本教程中创建以设置各按钮图标的数据对象。
  
• 包含 Navigation Item 节点图标的纹理。
  
• 屏幕 (Screen) 节点的资源字典包含指向 2D 网格布局 (Grid layout 2D)、RootPage 和按钮节点的别名。
  这些别名为访问使用 Kanzi Engine API 的节点提供了便捷方式。
  
• Shake 动画数据 (Animation Data) 项。
  当用户拖动节点时，使用动画晃动该节点。
  

为用户拖动的按钮创建可视化效果

这一节中，将创建用于可视化用户正在拖动的按钮的预设件。您可以移动看上去像被拖动按钮的这个预设件实例，来代替拖动按钮到新位置。当用户结束拖放手势，可以设置用于设置按钮图标的数据对象的顺序，代替设置 2D 网格布局 (Grid layout 2D) 节点中按钮的位置。

要为用户拖动的按钮创建可视化效果：

1. 在 Kanzi Studio 中打开存储在 <KanziWorkspace>/Tutorials/Drag and drop/Start/Tool_project 目录中的 Drag and drop.kzproj 工程。
   
   
2. 在预设件 (Prefabs) 中点击 ，选择 2D 空节点 (Empty Node 2D)，将其命名为 Drag Item，在其中创建 2D 空节点 (Empty Node 2D) 节点，并在属性 (Properties) 中添加和设置：
   • 背景笔刷 (Background Brush) 为Drag Item Background Color Brush
     这样可将预设件的背景颜色设置为比导航栏更浅。
   • 不透明度 (Opacity) 为 0.7
     这样可将预设件设为部分透明。
   实现拖放操作，以便在用户拖动按钮时拖动 Drag Item 预设件的实例。
   
3. 在预设件 (Prefabs) > Navigation Item 右键点击图像 (Image) 节点并选择复制 (Copy)，然后右键点击 2D 空节点 (Empty Node 2D) 节点并选择粘贴 (Paste)。
   复制图像 (Image) 节点到Drag Item 预设件，因为您想让用户拖动的节点可视化效果看上去和 Navigation Item 节点一样。
   
4. 选择文件 (File) > 导出 (Export) > 导出 KZB (Export KZB)。
   Kanzi Studio 从 Kanzi Studio 工程创建 kzb 文件和配置文件。Kanzi Studio 将导出的文件存储在 <ProjectName>/Application/bin 目录或您在 工程 (Project) > 属性 (Properties) 的二进制导出目录 (Binary Export Directory) 属性中指定的位置。Kzb 文件包含 Kanzi Studio 工程中的所有节点和资源，您在本地化表中标记为本地化包的资源除外。
   当您从 Visual Studio 中运行您的 Kanzi 应用程序时，您的应用程序就会加载 kzb 文件和配置文件。
   

设置按钮的图标

在本节中，您将创建用于设置按钮图标的数据对象。

要设置按钮的图标：

1. 在 Visual Studio 中，打开存储在 Drag and drop/Start/Application/configs/platforms/win32 目录中的 Drag_and_drop.sln 解决方案。
   
   注

   如果您在 Visual Studio 2017 中打开教程解决方案，遇到提示您重新定位工程到最新的 Microsoft 工具集时，请点击取消 (Cancel)。

   建议

   要从 Kanzi Studio 打开 Kanzi Studio 工程的目录，选择文件 (File) > 在 Windows 资源管理器中打开 (Open in Windows Explorer)。
   

2. 在 Visual Studio 中打开 drag_and_drop.cpp 文件，在 onProjectLoaded() 函数中创建数据对象并设置数据上下文：

       virtual void onProjectLoaded() KZ_OVERRIDE
       {
           Domain* domain = getDomain();
   
           //创建名为 Root 的数据对象。
           m_rootData = make_shared<DataObject>(domain, "Root");
   
           //创建数据对象并将其添加到 Root 数据对象中。
           //为各数据对象添加含纹理 kzb URL 的字符串数据对象。
           //在 Kanzi Studio 工程中，您可以在素材库 (Library) > 材质和纹理 (Materials and Textures) > 纹理 (Textures) 中找到纹理。
           DataObjectSharedPtr item0 = make_shared<DataObject>(domain, "item0");
           m_rootData->addChild(item0);
           item0->addChild(make_shared<DataObjectString>(domain, "image", "kzb://drag_and_drop/Textures/Navigation"));
   
           DataObjectSharedPtr item1 = make_shared<DataObject>(domain, "item1");
           m_rootData->addChild(item1);
           item1->addChild(make_shared<DataObjectString>(domain, "image", "kzb://drag_and_drop/Textures/Phone"));
   
           DataObjectSharedPtr item2 = make_shared<DataObject>(domain, "item2");
           m_rootData->addChild(item2);
           item2->addChild(make_shared<DataObjectString>(domain, "image", "kzb://drag_and_drop/Textures/Applications Home"));
   
           DataObjectSharedPtr item3 = make_shared<DataObject>(domain, "item3");
           m_rootData->addChild(item3);
           item3->addChild(make_shared<DataObjectString>(domain, "image", "kzb://drag_and_drop/Textures/Sound Loud"));
   
           DataObjectSharedPtr item4 = make_shared<DataObject>(domain, "item4");
           m_rootData->addChild(item4);
           item4->addChild(make_shared<DataObjectString>(domain, "image", "kzb://drag_and_drop/Textures/Car Wheel"));
   
           //获取屏幕 (Screen) 节点。
           ScreenSharedPtr screen = getScreen();
   
           //将屏幕 (Screen) 节点的数据上下文 (Data Context) 属性设置为 Root 数据对象。
           //通过设置数据上下文 (Data Context) 属性，您可以告诉应用程序从哪个数据源接收数据。
           screen->setProperty(DataContext::DataContextProperty, m_rootData);
       }
   
   private: 
   
       //为 Root 数据对象定义成员变量。
       DataObjectSharedPtr m_rootData;
   

3. 在 DragAndDrop 类的私有部分创建向按钮分配图标的函数：

   private: 
   
       //要为按钮分配正确的图标，设置各按钮的数据上下文 (Data Context) 属性。
       void updateItems()
       {
           //创建迭代器，在 Root 数据对象中迭代数据对象。
           DataObject::ChildConstIterator dataIt = m_rootData->beginChildren(), endDataIt = m_rootData->endChildren();
   
           //创建迭代器，迭代
           //导航栏 (Navigation Bar) > 2D 网格布局 (Grid layout 2D) 节点的子节点按钮。
           Node2D::ChildConstIterator nodeIt = m_grid->beginChildren();
   
           //将各按钮节点的数据上下文 (Data Context) 属性设置为正确的数据对象。
           for (; dataIt != endDataIt; dataIt++, nodeIt++)
           {
               Node2DSharedPtr itemNode = *nodeIt;
               DataObjectSharedPtr itemData = *dataIt;
               itemNode->setProperty(DataContext::DataContextProperty, itemData);
           }
       }
   
       //定义 2D 网格布局 (Grid layout 2D) 节点的成员变量。
       GridLayout2DSharedPtr m_grid;
   
       ...

4. 在 onProjectLoaded() 函数的末尾调用 updateItems() 函数：

       virtual void onProjectLoaded() KZ_OVERRIDE
       {
           ...
           
           //获取用户正在拖动的节点的父 2D 网格布局 (Grid layout 2D) 节点。
           m_grid = screen->lookupNode<GridLayout2D>("#Grid Layout 2D");
   
           updateItems();
       }
   

5. 在 Visual Studio 中，为您的 Visual Studio 版本选择一个解决方案配置并运行应用程序。
   例如，如果您仍在开发应用程序，选择GL_vs2015_Debug 配置。要创建 Kanzi 应用程序的产品版本，选择一个可用的发布配置。
   
   Kanzi 使用您创建的数据对象分配图标到按钮。
   

另请参阅

要详细了解有关预设件的信息，请参阅使用预设件。

要详细了解有关数据源的信息，请参阅数据源。

要详细了解 Kanzi 中的别名，请参阅使用别名。

打开导航